<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>哆啦A梦</title>
    <style>
        @keyframes eyeMoveX {
            0%{
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100%{
                -webkit-transform: rotate(360deg);
                -moz-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @-webkit-keyframes eyeMoveX {
            0%{
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100%{
                -webkit-transform: rotate(360deg);
                -moz-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @-o-keyframes eyeMoveX {
            0%{
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100%{
                -webkit-transform: rotate(360deg);
                -moz-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @-ms-keyframes eyeMoveX {
            0%{
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100%{
                -webkit-transform: rotate(360deg);
                -moz-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @-moz-keyframes eyeMoveX {
            0%{
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100%{
                -webkit-transform: rotate(360deg);
                -moz-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @keyframes handMove {
            0%{
                -webkit-transform: rotateZ(0deg);
                -moz-transform: rotateZ(0deg);
                -ms-transform: rotateZ(0deg);
                -o-transform: rotateZ(0deg);
                transform: rotateZ(0deg);
            }
            50%{
                -webkit-transform: rotateZ(90deg);
                -moz-transform: rotateZ(90deg);
                -ms-transform: rotateZ(90deg);
                -o-transform: rotateZ(90deg);
                transform: rotateZ(90deg);
            }
            100%{
                -webkit-transform: rotateZ(0deg);
                -moz-transform: rotateZ(0deg);
                -ms-transform: rotateZ(0deg);
                -o-transform: rotateZ(0deg);
                transform: rotateZ(0deg);
            }
        }
        @-webkit-keyframes handMove {
            0%{
                -webkit-transform: rotateZ(0deg);
                -moz-transform: rotateZ(0deg);
                -ms-transform: rotateZ(0deg);
                -o-transform: rotateZ(0deg);
                transform: rotateZ(0deg);
            }
            50%{
                -webkit-transform: rotateZ(90deg);
                -moz-transform: rotateZ(90deg);
                -ms-transform: rotateZ(90deg);
                -o-transform: rotateZ(90deg);
                transform: rotateZ(90deg);
            }
            100%{
                -webkit-transform: rotateZ(0deg);
                -moz-transform: rotateZ(0deg);
                -ms-transform: rotateZ(0deg);
                -o-transform: rotateZ(0deg);
                transform: rotateZ(0deg);
            }
        }
        @-o-keyframes handMove {
            0%{
                -webkit-transform: rotateZ(0deg);
                -moz-transform: rotateZ(0deg);
                -ms-transform: rotateZ(0deg);
                -o-transform: rotateZ(0deg);
                transform: rotateZ(0deg);
            }
            50%{
                -webkit-transform: rotateZ(90deg);
                -moz-transform: rotateZ(90deg);
                -ms-transform: rotateZ(90deg);
                -o-transform: rotateZ(90deg);
                transform: rotateZ(90deg);
            }
            100%{
                -webkit-transform: rotateZ(0deg);
                -moz-transform: rotateZ(0deg);
                -ms-transform: rotateZ(0deg);
                -o-transform: rotateZ(0deg);
                transform: rotateZ(0deg);
            }
        }
        @-ms-keyframes handMove {
            0%{
                -webkit-transform: rotateZ(0deg);
                -moz-transform: rotateZ(0deg);
                -ms-transform: rotateZ(0deg);
                -o-transform: rotateZ(0deg);
                transform: rotateZ(0deg);
            }
            50%{
                -webkit-transform: rotateZ(90deg);
                -moz-transform: rotateZ(90deg);
                -ms-transform: rotateZ(90deg);
                -o-transform: rotateZ(90deg);
                transform: rotateZ(90deg);
            }
            100%{
                -webkit-transform: rotateZ(0deg);
                -moz-transform: rotateZ(0deg);
                -ms-transform: rotateZ(0deg);
                -o-transform: rotateZ(0deg);
                transform: rotateZ(0deg);
            }
        }
        @-moz-keyframes handMove {
            0%{
                -webkit-transform: rotateZ(0deg);
                -moz-transform: rotateZ(0deg);
                -ms-transform: rotateZ(0deg);
                -o-transform: rotateZ(0deg);
                transform: rotateZ(0deg);
            }
            50%{
                -webkit-transform: rotateZ(90deg);
                -moz-transform: rotateZ(90deg);
                -ms-transform: rotateZ(90deg);
                -o-transform: rotateZ(90deg);
                transform: rotateZ(90deg);
            }
            100%{
                -webkit-transform: rotateZ(0deg);
                -moz-transform: rotateZ(0deg);
                -ms-transform: rotateZ(0deg);
                -o-transform: rotateZ(0deg);
                transform: rotateZ(0deg);
            }
        }
        /*头像部分*/
        .wrapper{
            position:relative;
            left:40%;
            top:0;
        }
        .doraemon{
            position:relative;
        }
        .doraemon .doraemon-head{
            position:relative;
            width:320px;
            height:300px;
            border-radius:150px;
            background:#07BBEE;
            background:-webkit-radial-gradient(circle at right top,#FFF 10%,#91DA30 20%,#55802E 75%,#000);
            background: -moz-radial-gradient(circle at right top,#FFF 10%,#91DA30 20%,#55802E 75%,#000);
            background:-ms-radial-gradient(circle at right top,#FFF 10%,#91DA30 20%,#55802E 75%,#000);
            background:radial-gradient(circle at right top,#FFF 10%,#91DA30 20%,#55802E 75%,#000);
            border:2px solid #555;
            -webkit-box-shadow: -5px 10px 15px rgba(0,0,0,.45) ;
            -moz-box-shadow: -5px 10px 15px rgba(0,0,0,.45) ;
            box-shadow: -5px 10px 15px rgba(0,0,0,.45) ;
        }
        /*脸部*/
        .doraemon .face{
            position:relative;
            z-index:2;
        }
        /*白色脸底*/
        .doraemon .face .white{
            width:265px;
            height:195px;
            -webkit-border-radius:150px;
            -moz-border-radius:150px;
            border-radius:150px;
            position:absolute;
            top:80px;
            left:28px;
            background:#FFF;
            background:radial-gradient(at right top, #FFF 75%, #EEE 80%, #999 90%, #444);
            background:-webkit-radial-gradient(at right top, #FFF 75%, #EEE 80%, #999 90%, #444);
            background:-moz-radial-gradient(at right top, #FFF 75%, #EEE 80%, #999 90%, #444);
            background:-ms-radial-gradient(at right top, #FFF 75%, #EEE 80%, #999 90%, #444);
        }
        /*鼻子*/
        .doraemon .face .nose{
            width:30px;
            height:30px;
            -webkit-border-radius:15px;
            -moz-border-radius:15px;
            border-radius:15px;
            background:#C93300;
            border:2px solid #000;
            position:absolute;
            top:50px;
            left:112px;
            z-index:3;
        }
        /*鼻子高光*/
        .doraemon .face .nose .light{
            width:10px;
            height:10px;
            -webkit-border-radius:5px;
            -moz-border-radius:5px;
            border-radius:5px;
            -webkit-box-shadow: 19px 8px 5px #FFF ;
            -moz-box-shadow: 19px 8px 5px #FFF ;
            box-shadow: 19px 8px 5px #FFF ;
        }
        /*鼻子下的线*/
        .doraemon .face .nose_line{
            width:3px;
            height:100px;
            background:#333;
            position:absolute;
            top:84px;
            left:127px;
            z-index:3;
        }
        /*嘴巴*/
        .doraemon .face .mouth{
            width:220px;
            height:400px;
            border-bottom:3px solid #333;
            border-radius:120px;
            position:absolute;
            top:-216px;
            left:23px;
        }
        /*眼睛*/
        .doraemon .eyes{
            position:relative;
            z-index:3;
        }
        /*眼镜共同的样式*/
        .doraemon .eyes .eye{
            width:72px;
            height:82px;
            background:#FFF;
            border:2px solid #000;
            -webkit-border-radius:35px 35px;
            -moz-border-radius:35px 35px;
            border-radius:35px 35px;
            position:absolute;
            top:40px;
        }
        /*眼珠*/
        .doraemon .eyes .eye .black{
            width:14px;
            height:14px;
            background:#000;
            -webkit-border-radius:7px;
            -moz-border-radius:7px;
            border-radius:7px;
            position:absolute;



        }

        .doraemon .eyes .left{
            left:82px;
        }
        .doraemon .eyes .right{
            left:156px;
        }
        .doraemon .eyes .eye .bleft{
            left:30px;
            top:1px;
            -webkit-transform-origin:7px 40px;
            -moz-transform-origin:7px 40px;
            -ms-transform-origin:7px 40px;
            -o-transform-origin:7px 40px;
            transform-origin:7px 40px;
            -webkit-animation: eyeMoveX 2s linear infinite ;
            -moz-animation: eyeMoveX 3s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate,eyeMoveY 3s cubic-bezier(0.36,0,0.64,1) 0s infinite alternate;
            -ms-animation: eyeMoveX 3s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate,eyeMoveY 3s cubic-bezier(0.36,0,0.64,1) 0s infinite alternate;
            -o-animation: eyeMoveX 3s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate,eyeMoveY 3s cubic-bezier(0.36,0,0.64,1) 0s infinite alternate;
            animation: eyeMoveX 2s linear infinite ;
        }
        .doraemon .eyes .eye .bright{
            left:30px;
            top:1px;
            -webkit-transform-origin:80px 80px;
            -moz-transform-origin:50% 50%;
            -ms-transform-origin:50% 50%;
            -o-transform-origin:50% 50%;
            transform-origin:7px 40px;
            -webkit-animation: eyeMoveX 2s linear infinite ;
            -moz-animation: eyeMoveX 3s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate,eyeMoveY 3s cubic-bezier(0.36,0,0.64,1) 0s infinite alternate;
            -ms-animation: eyeMoveX 3s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate,eyeMoveY 3s cubic-bezier(0.36,0,0.64,1) 0s infinite alternate;
            -o-animation: eyeMoveX 3s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate,eyeMoveY 3s cubic-bezier(0.36,0,0.64,1) 0s infinite alternate;
            animation: eyeMoveX 2s linear infinite ;
        }

        /*胡须，挡住一部分嘴巴*/
        .doraemon .whiskers{
            width:220px;
            height:80px;
            background:#FFF;
            -webkit-border-radius:15px;
            -moz-border-radius:15px;
            border-radius:15px;
            position:absolute;
            top:54px;
            left:23px;
            z-index:2;
        }
        /*胡须的公用样式*/
        .doraemon .whiskers .whisker{
            width:60px;
            height:2px;
            background:#333;
            position:absolute;
            z-index:2;
        }
        /*右上胡子*/
        .rTop{
            left:165px;
            top:25px;
        }
        .rMiddle{
            left:167px;
            top:45px;
        }
        .rBottom{
            left:165px;
            top:65px;
        }
        /*左边胡子*/
        .lTop{
            left:0;
            top:25px;
        }
        .lMiddle{
            left:-2px;
            top:45px;
        }
        .lBottom{
            left:0;
            top:65px;
        }
        /*胡子旋转角度*/
        .r160{
            -webkit-transform: rotate(160deg);
            -moz-transform: rotate(160deg);
            -ms-transform: rotate(160deg);
            -o-transform: rotate(160deg);
            transform: rotate(160deg);
        }
        .r20{
            -webkit-transform: rotate(200deg);
            -moz-transform: rotate(200deg);
            -ms-transform: rotate(200deg);
            -o-transform: rotate(200deg);
            transform: rotate(200deg);
        }

        /*围脖*/
        .doraemon .choker{
            width:230px;
            height:20px;
            background:#C40;
            background:-ms-linear-gradient(center top,#C40,#800400);
            background:-moz-linear-gradient(center top,#C40,#800400);
            background:-webkit-gradient(linear,left top,left bottom,from(#C40),to(#800400));
            border:2px solid #000;
            -webkit-border-radius:10px;
            -moz-border-radius:10px;
            border-radius:10px;
            position:relative;
            top:275px;
            left:45px;
            z-index:4;
        }
        /*铃铛*/
        .doraemon .choker .bell{
            width:40px;
            height:40px;
            _overflow:hidden;/*IE6 hack*/
            border:2px solid #000;
            -webkit-border-radius:50px;
            -moz-border-radius:50px;
            border-radius:50px;
            background:#F9F12A;
            background:-ms-linear-gradient(top,#F9F12A,#E9E11A 75%, #A9A100);
            background:-moz-linear-gradient(top,#F9F12A,#E9E11A 75%, #A9A100);
            background:-webkit-gradient(linear,left top,left bottom,from(#F9F12A),color-stop(0.5,#E9E11A),to(#A9A100));
            position:absolute;
            left:90px;
            top:5px;
        }
        /*双横线*/
        .doraemon .choker .bell_line{
            width:36px;
            height:2px;
            background:#F9F12A;
            border:2px solid #333;
            border-radius:3px 3px 0 0 ;
            position:absolute;
            top:10px;
        }
        /*黑点*/
        .doraemon .choker .bell_circle{
            width:12px;
            height:10px;
            background:#000;
            border-radius:5px;
            position:absolute;
            top:20px;
            left:14px;
        }
        /*黑点下的线*/
        .doraemon .choker .bell_under{
            width:3px;
            height:15px;
            background:#000;
            position:absolute;
            left:18px;
            top:27px;
        }
        /*铃铛的高光部分*/
        .doraemon .choker .bell_light{
            width:12px;
            height:12px;
            -webkit-border-radius:10px;
            -moz-border-radius:10px;
            border-radius:10px;
            -webkit-box-shadow: 19px 8px 5px #FFF ;
            -moz-box-shadow: 19px 8px 5px #FFF ;
            box-shadow: 19px 8px 5px #FFF ;
            position:absolute;
            top:-5px;
            left:5px;
            opacity: 0.7;
        }
        /*身体*/
        .doraemon .bodys{
            position:relative;
            top:9px;
        }
        /*肚子*/
        .doraemon .bodys .body{
            width:220px;
            height:165px;
            background:#07BEEA;
            background:-ms-linear-gradient(right center,#95DB38,#7DBC2F 50%, #5A882E 75%,#496E27 100%);
            background:-moz-linear-gradient(right center,#95DB38,#7DBC2F 50%, #5A882E 75%,#496E27 100%);
            background: -webkit-gradient(linear,right top,left top,from(#95DB38),color-stop(0.5, #7DBC2F),color-stop(0.75,#5A882E), to(#496E27));
            border:2px solid #333;
            position:absolute;
            top:265px;
            left:50px;
            z-index:1;
        }
        /*白色肚兜*/
        .doraemon .bodys .wraps{
            width:170px;
            height:170px;
            background:#FFF;
            background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000));
            background: -moz-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000);
            background: -ms-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000);
            border:2px solid #000;
            -webkit-border-radius:85px;
            -moz-border-radius:85px;
            border-radius:85px;
            position:absolute;
            left:72px;
            top:230px;
            z-index:1;
        }
        /*口袋*/
        .doraemon .bodys .pocket{
            width:130px;
            height:130px;
            -webkit-border-radius:65px;
            -moz-border-radius:65px;
            border-radius:65px;
            background:#FFF;
            background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff));
            background: -moz-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff);
            background: -ms-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff);
            border: 2px solid #000;
            position:absolute;
            left:92px;
            top:250px;
            z-index:1;
        }
        /*挡住口袋一半*/
        .doraemon .bodys .pocket_mask{
            width:134px;
            height:60px;
            background:#FFF;
            border-bottom:2px solid #000;
            position:absolute;
            top:259px;
            left:92px;
            z-index:1;
        }
        /*左右手*/
        .doraemon .hand_right, .doraemon .hand_left{
            width:144px;
            height:100px;
            position:absolute;
            top:284px;
            left:248px;
        }
        /*左手*/
        .doraemon .hand_left{
            left:-10px;
            -webkit-transform-origin:50% 30%;
            -moz-transform-origin:50% 30%;
            -ms-transform-origin:50% 30%;
            -o-transform-origin:50% 30%;
            transform-origin:50% 30%;
            -webkit-animation:handMove 2s linear infinite 1s;
            -o-animation:handMove 2s linear infinite 1s;
            animation:handMove 2s linear infinite 1s;
        }
        /*手臂公共部分*/
        .doraemon .arm{
            width:80px;
            height:50px;
            background:#07BEEA;
            background: -webkit-gradient(linear, left top, left bottom, from(#496F27),color-stop(0.85,#4E7629), to(#555));
            background: -moz-linear-gradient(center top, #496F27, #4E7629 85%, #555);
            background: -ms-linear-gradient(center top, #496F27, #4E7629 85%, #555);
            border: 1px solid #000000;
            -webkit-box-shadow: -10px 7px 10px rgba(0,0,0,.35) ;
            -moz-box-shadow: -10px 7px 10px rgba(0,0,0,.35) ;
            box-shadow: -10px 7px 10px rgba(0,0,0,.35) ;
            z-index:0;
            position:relative;
        }
        /*右手手臂*/
        .doraemon .hand_right .arm{
            top:17px;
            -webkit-transform: rotate(35deg);
            -moz-transform: rotate(35deg);
            -ms-transform: rotate(35deg);
            -o-transform: rotate(35deg);
            transform: rotate(35deg);
            background: -webkit-gradient(linear, left top, left bottom, from(#95DA38),color-stop(0.85,#90D536), to(#555));
            background: -moz-linear-gradient(center top, #95DA38, #90D536 85%, #555);
            background: -ms-linear-gradient(center top, #95DA38, #90D536 85%, #555);
        }
        /*左手手臂*/
        .doraemon .hand_left .arm{
            top:17px;
            -webkit-box-shadow: 5px -7px 10px rgba(0,0,0,.25);
            -moz-box-shadow: 5px -7px 10px rgba(0,0,0,.25);
            box-shadow: 5px -7px 10px rgba(0,0,0,.25);
            -webkit-transform: rotate(145deg);
            -moz-transform: rotate(145deg);
            -ms-transform: rotate(145deg);
            -o-transform: rotate(145deg);
            transform: rotate(145deg);
        }
        /*圆形手掌公共部分*/
        .doraemon .circle{
            width:60px;
            height:60px;
            -webkit-border-radius:30px;
            -moz-border-radius:30px;
            border-radius:30px;
            border:2px solid #000;
            background:#FFF;
            background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd), to(#999));
            background: -moz-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999);
            background: -ms-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999);
            position: absolute;
        }
        /*右手手掌*/
        .doraemon .hand_right .circle{
            left:40px;
            top:32px;
        }
        /*左手手掌*/
        .doraemon .hand_left .circle{
            left:-20px;
            top:32px;
        }
        /*手臂身体相交处*/
        .doraemon .arm_rewrite{
            height:45px;
            width:4px;
            position:relative;
            z-index:1;
        }
        /*右手相交处*/
        .doraemon .hand_right .arm_rewrite{
            top:-45px;
            left:22px;
            background:#94DA37;
        }
        /*左手相交处*/
        .doraemon .hand_left .arm_rewrite{
            top:-45px;
            left:60px;
            background:#4A7027;
        }
        /*脚部*/
        .doraemon .foot{
            width:280px;
            height:40px;
            position:relative;
            top:374px;
            left:20px;
            z-index:1;
        }
        /*左右脚公共样式*/
        .doraemon .foot .left, .doraemon .foot .right{
            width: 125px;
            height:30px;
            background:#FFF;
            background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));
            background: -moz-linear-gradient(right top, #fff, #fff 75%, #eee 85%, #999);
            background: -ms-linear-gradient(right top, #fff, #fff 75%, #eee 85%, #999);
            border: 2px solid #333;
            -webkit-border-radius:;
            -moz-border-radius:;
            border-radius:80px 60px 60px 40px;
            -webkit-box-shadow: -6px 0 10px rgba(0,0,0,.35);
            -moz-box-shadow: -6px 0 10px rgba(0,0,0,.35);
            box-shadow: -6px 0 10px rgba(0,0,0,.35);
            position:relative;
        }
        .doraemon .foot .left{
            left:8px;
            top:65px;
        }
        .doraemon .foot .right{
            top:31px;
            left:141px;
        }
        /*双脚之间的缝隙*/
        .doraemon .foot .foot_rewrite{
            width:20px;
            height:10px;
            background:#FFF;
            background: -webkit-gradient(linear, right top, left bottom, from(#666),color-stop(0.83,#fff), to(#fff));
            background: -moz-linear-gradient(right top, #666, #fff 83%, #fff);
            background: -ms-linear-gradient(right top, #666, #fff 83%, #fff);
            border:2px solid #000;
            border-bottom:none;
            -webkit-border-radius:40px 40px 0 0 ;
            -moz-border-radius:40px 40px 0 0 ;
            border-radius:40px 40px 0 0 ;
            position:relative;
            left:130px;
            top:-11px;
            _left:127px;
        }

    </style>
</head>
<body>
<div class="wrapper">
    <!--<img src="img/head.png" alt="header">-->
    <!--叮当猫整体-->
    <div class="doraemon">
        <!--头部-->
        <div class="doraemon-head">
            <!--眼睛-->
            <div class="eyes">
                <div class="eye left">
                    <!--左眼珠-->
                    <div class="black bleft">
                    </div>
                </div>
                <div class="eye right">
                    <!--右眼珠-->
                    <div class="black bright">
                    </div>
                </div>
            </div>

            <!--脸部-->
            <div class="face">
                <!--白色脸底-->
                <div class="white">
                    <!--鼻子-->
                    <div class="nose">
                        <!--鼻子高光部分-->
                        <div class="light">
                        </div>
                    </div>
                    <!--鼻子的竖线-->
                    <div class="nose_line">
                    </div>
                    <!--嘴巴-->
                    <div class="mouth">
                    </div>
                    <!--胡须-->
                    <div class="whiskers">
                        <div class="whisker rTop r160"></div>
                        <div class="whisker rMiddle"></div>
                        <div class="whisker rBottom r20"></div>
                        <div class="whisker lTop r20"></div>
                        <div class="whisker lMiddle"></div>
                        <div class="whisker lBottom r160"></div>
                    </div>
                </div>
            </div>

            <!--脖子和铃铛-->
            <div class="choker">
                <!--铃铛-->
                <div class="bell">
                    <div class="bell_line"></div>
                    <div class="bell_circle"></div>
                    <div class="bell_under"></div>
                    <div class="bell_light"></div>
                </div>
            </div>

            <!--身体-->
            <div class="bodys">
                <!--肚子-->
                <div class="body"></div>
                <!--肚兜-->
                <div class="wraps"></div>
                <!--口袋-->
                <div class="pocket"></div>
                <!--遮住一半口袋，呈现半圆形-->
                <div class="pocket_mask"></div>
            </div>

            <!--右手-->
            <div class="hand_right">
                <!--手臂-->
                <div class="arm"></div>
                <!--手掌-->
                <div class="circle"></div>
                <!--遮住手臂和身子交接处的线-->
                <div class="arm_rewrite"></div>
            </div>
            <!--左手-->
            <div class="hand_left">
                <div class="arm"></div>
                <div class="circle"></div>
                <div class="arm_rewrite"></div>
            </div>

            <!--脚-->
            <div class="foot">
                <div class="left"></div>
                <div class="right"></div>
                <!--双脚之间的缝隙-->
                <div class="foot_rewrite"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>